<template>
	<view class="content">
		<u-notify ref="uNotify"></u-notify>
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<view class="box">
				<u--input
					v-model="username"
					placeholder="帐号"
					prefixIcon="account-fill"
					prefixIconStyle="font-size: 22px;color: #909399"
				></u--input>
			</view>
			<view class="box">
				<u--input
					v-model="password"
					placeholder="密码"
					:password="true"
					prefixIcon="lock-opened-fill"
					prefixIconStyle="font-size: 22px;color: #909399"
				></u--input>
			</view>
			<view class="box">
				<u-button type="primary" text="登录" @click="login"></u-button>
			</view>

		</view>
	</view>
</template>

<script>
	import { checkLogin } from "comments/auth.js"
	
	export default {
		data() {
			return {
				username: '',
				password: '',
			}
		},
		methods: {
			login() {
				uni.request({
					url: "/api/login",
					method: "POST",
					data: {
						password: this.password,
						username: this.username,
					},
					success: (res) => {
						if(res.data.code === 200) {
							uni.setStorage({
								key: "token",
								data: res.data.token,
							})
							uni.setStorage({
								key: "user",
								data: res.data.data,
							})
							this.$refs.uNotify.show({
								top: 10,
								type: 'success',
								color: '#00f600',
								bgColor: '#2f3233',
								message: res.data.msg,
								duration: 1000 * 3,
								fontSize: 14,
								safeAreaInsetTop: false
							})
							uni.switchTab({
								url: "/pages/home/home"
							})
						} else {
							this.$refs.uNotify.show({
								top: 10,
								type: 'error',
								color: '#ff0000',
								bgColor: '#2f3233',
								message: res.data.msg,
								duration: 1000 * 3,
								fontSize: 14,
								safeAreaInsetTop: false
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
		flex-direction: column;
		width: 80%;
	}
	
	.box {
		margin: 8px;
	}
</style>
